<template>
	<div class="game-container report-container">
		<div class="view-container dealer-container">
			<div class="params">
				<el-form
					ref="searchForm"
					:model="queryData"
					label-width="80px"
					:inline="true"
				>
					<el-form-item label="申请账号:">
						<el-input
							v-model.trim="queryData.applyAccount"
							clearable
							:placeholder="$t('common.please_enter')"
							maxlength="11"
						></el-input>
					</el-form-item>
					<el-form-item label="使用站点:" class="tagheight">
						<el-select
							v-model="queryData.loginAppId"
							clearable
							:placeholder="$t('common.select_all')"
							:popper-append-to-body="false"
						>
							<el-option
								v-for="item in appId"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button
							type="primary"
							icon="el-icon-search"
							:disabled="loading"
							size="medium"
							@click="search"
						>
							查询
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							:disabled="loading"
							size="medium"
							@click="reset('searchForm')"
						>
							重置
						</el-button>
					</el-form-item>
				</el-form>
				<el-button
					type="info"
					plain
					icon="el-icon-refresh"
					:disabled="loading"
					size="medium"
					class="refresh"
					@click="refresh"
				>
					刷新
				</el-button>
			</div>
			<div class="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					:data="tableDta"
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						align="center"
						:label="$t('common.actions')"
					>
						<template slot-scope="scope">
							<el-link
								v-if="hasPermission('602')"
								:disabled="scope.row.whetherWrite === 1"
								type="primary"
								@click="openRechargeFrom(scope.row)"
							>
								填写充值单
							</el-link>
						</template>
					</el-table-column>
					<el-table-column
						prop="valetCode"
						align="center"
						label="代客充值暗号"
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.valetCode"
								:title="scope.row.valetCode"
								:copy="copy"
							>
								{{ scope.row.valetCode }}
							</Copy>

							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="loginAppId"
						align="center"
						label="使用站点"
						width="90"
					>
						<template slot-scope="scope">
							{{ typeFilter(scope.row.loginAppId, 'appId') }}
						</template>
					</el-table-column>
					<el-table-column
						prop="applyAccount"
						align="center"
						label="申请账号"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.applyAccount || '' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="applyAt"
						align="center"
						:label="`${$t('funds.apply_time')}:`"
						width="220"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.applyAt || '' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="applySource"
						align="center"
						label="申请来源"
					>
						<template slot-scope="scope">
							<span>
								{{
									typeFilter(
										scope.row.applySource,
										'loginDeviceType'
									)
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="windControlName"
						align="center"
						label="风控等级"
					>
						<template slot-scope="scope">
							<span>{{ scope.row.windControlName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('common.account_status')"
					>
						<template slot-scope="scope">
							<span
								v-if="scope.row.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
							</span>
							<span
								v-if="scope.row.accountLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
							</span>
							<span
								v-if="scope.row.gameLockStatus === 1"
								class="lockingRgba"
							>
								游戏锁定
							</span>
							<span
								v-if="
									scope.row.loginLockStatus === 0 &&
										scope.row.accountLockStatus === 0 &&
										scope.row.gameLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="vipGrade"
						align="center"
						:label="$t('funds.vip_level')"
					>
						<template slot-scope="scope">
							<span>
								{{
									scope.row.vipGrade ||
									scope.row.vipGrade == 0
										? 'VIP ' + scope.row.vipGrade
										: '-'
								}}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="转账信息"
						width="300"
					>
						<template slot-scope="scope">
							<div
								v-if="scope.row.whetherWrite"
								class="tranfer-info"
								style="text-align: left"
							>
								<div class="info">
									<div>
										转账姓名：{{
											scope.row.transferName || ' -'
										}}
									</div>
									<div>
										转账地址：{{
											scope.row.transferAddress || ' -'
										}}
									</div>
									<div>
										转账卡号：{{
											scope.row.transferCard || ' -'
										}}
									</div>
								</div>
								<span
									v-clipboard:copy="
										getTransferInfo(
											scope.row.transferName,
											scope.row.transferAddress,
											scope.row.transferCard
										)
									"
									v-clipboard:success="onCopy"
									v-clipboard:error="onError"
									class="copy-btn"
								>
									<i class="el-icon-document-copy" />
								</span>
							</div>
							<span v-else>-</span>
						</template>
					</el-table-column>
				</el-table>
				<el-dialog
					title="代客充值订单"
					:visible.sync="recharge.dialogVisible"
					width="500px"
					:close-on-click-modal="false"
					class="recharge-dialog"
					@closed="dialogClosed"
				>
					<div>
						<el-form
							ref="rechargeForm"
							:model="recharge.formData"
							:rules="rules"
							label-width="105px"
							:inline="false"
						>
							<el-form-item class="disabled" label="申请账号:">
								<el-input
									v-model="recharge.formData.applyAccount"
									maxlength="11"
									disabled
								></el-input>
							</el-form-item>
							<el-form-item
								label="充值账号:"
								prop="memberAccount"
							>
								<el-input
									v-model.trim="
										recharge.formData.memberAccount
									"
									:placeholder="$t('common.please_enter')"
									maxlength="11"
									clearable
								></el-input>
							</el-form-item>
							<el-form-item label="充值方式:" prop="payType">
								<el-select
									v-model="recharge.formData.payType"
									style="width: 100%"
								>
									<el-option
										v-for="v in rechargeMethods"
										:key="v.code"
										:label="v.value"
										:value="v.code"
									></el-option>
								</el-select>
							</el-form-item>
							<el-form-item
								label="付款人姓名:"
								prop="depositorName"
							>
								<el-input
									v-model.trim="
										recharge.formData.depositorName
									"
									:placeholder="$t('common.please_enter')"
									maxlength="15"
									clearable
								></el-input>
							</el-form-item>
							<el-form-item label="付款时间:" prop="depositAt">
								<el-date-picker
									v-model="recharge.formData.depositAt"
									type="datetime"
									placeholder="选择日期时间"
									style="width: 100%"
									:clearable="false"
									default-value
								></el-date-picker>
							</el-form-item>
							<el-form-item
								label="充值金额:"
								prop="depositAmount"
							>
								<el-input-number
									v-model.trim="
										recharge.formData.depositAmount
									"
									:placeholder="$t('common.please_enter')"
									:controls="false"
									:max="99999999999"
									style="width: 100%;text-align: left"
									:min="1"
									@blur="onBlur"
								></el-input-number>
							</el-form-item>
							<el-form-item
								:label="`${$t('common.remark')}:`"
								prop="remark"
							>
								<el-input
									v-model="recharge.formData.remark"
									type="textarea"
									maxlength="50"
									show-word-limit
									:placeholder="$t('common.please_enter')"
									v-input="{ name: 'noEmpty' }"
								></el-input>
							</el-form-item>
						</el-form>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button
							type="primary"
							:disabled="recharge.loading"
							@click="submitRechargeFrom"
						>
							<i
								v-show="recharge.loading"
								class="el-icon-loading"
							></i>
							提交
						</el-button>
						<el-button
							:disabled="recharge.loading"
							@click="recharge.dialogVisible = false"
						>
							取消
						</el-button>
						<el-button
							:disabled="recharge.loading"
							type="info"
							@click="reset('rechargeForm')"
						>
							重置
						</el-button>
					</div>
				</el-dialog>
				<el-dialog
					class="transfer-info-dialog"
					:close-on-click-modal="false"
					:visible.sync="transferInfoDialog.visible"
					width="500px"
				>
					<div class="info-wrapper">
						<div class="logo">
							<svg
								t="1635336053896"
								class="icon"
								viewBox="0 0 1024 1024"
								version="1.1"
								xmlns="http://www.w3.org/2000/svg"
								p-id="3913"
								width="64"
								height="64"
							>
								<path
									d="M512 0C229.668571 0 0 229.668571 0 512s229.668571 512 512 512 512-229.668571 512-512S794.331429 0 512 0z m307.2 343.771429s-267.702857 295.497143-327.68 365.714285c-59.977143 70.217143-106.788571 0-106.788571 0L210.651429 529.554286s-27.794286-42.422857 21.942857-81.92c46.811429-38.034286 84.845714 0 84.845714 0l122.88 128.731428L746.057143 291.108571s29.257143-20.48 59.977143 5.851429c23.405714 21.942857 13.165714 46.811429 13.165714 46.811429z"
									fill="#68BF7B"
									p-id="3914"
								></path>
							</svg>
						</div>
						<h1>代客充值订单提交成功</h1>
						<div class="flex">
							<div>
								订单号：
								<span class="order-number">
									{{ transferInfoDialog.info.orderNo }}
								</span>
							</div>
							<span>等待第三方确认结果</span>
						</div>
						<div class="row">
							<p>
								<span class="blod">转账信息：</span>
								<span
									v-clipboard:copy="
										getTransferInfo(
											transferInfoDialog.info.ownerName,
											transferInfoDialog.info.address,
											transferInfoDialog.info.bankCardNo
										)
									"
									v-clipboard:success="onCopy"
									v-clipboard:error="onError"
									class="copy-btn"
								>
									<!-- <el-link type="success">复制</el-link> -->
									<i class="el-icon-document-copy" />
								</span>
							</p>
							<p>
								转账姓名：{{
									transferInfoDialog.info.ownerName || ' -'
								}}
							</p>
							<p>
								转账地址：{{
									transferInfoDialog.info.address || ' -'
								}}
							</p>
							<p>
								转账卡号：{{
									transferInfoDialog.info.bankCardNo || ' -'
								}}
							</p>
						</div>
					</div>
					<div slot="footer" style="text-align: center">
						<el-button
							size="medium"
							type="primary"
							@click="transferInfoDialog.visible = false"
						>
							返回
						</el-button>
					</div>
				</el-dialog>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
import list from '@/mixins/list'
import { routerNames } from '@/utils/consts'
import { notSpecial2 } from '@/utils/validate'
import { Decimal } from 'decimal.js'
import dayjs from 'dayjs'
export default {
	name: routerNames.valetRecharge,
	components: {},
	mixins: [list],
	data() {
		var checkMemberAccount = (rule, value, callback) => {
			const isSpecial = !notSpecial2(String(value))
			const reg = /^[A-Za-z]{1}(?=(.*[a-zA-Z]){0,})(?=(.*[0-9]){1,})[0-9A-Za-z]{3,10}$/
			if (isSpecial) {
				callback('不支持空格及特殊字符')
			}
			if (!reg.test(value)) {
				callback('请输入4-11位，最少1个字母+数字组合，首位字母')
			} else {
				callback()
			}
		}
		return {
			tableDta: [],
			loading: false,
			saveDisabled: false,
			queryData: {
				applyAccount: undefined
			},
			transferInfoDialog: {
				visible: false,
				info: {}
			},
			rechargeMethods: [],
			recharge: {
				loading: false,
				dialogVisible: false,
				rowData: {},
				formData: {
					applyAccount: undefined,
					depositAt: undefined,
					id: undefined,
					depositAmount: undefined,
					depositorName: undefined,
					memberAccount: undefined,
					payType: undefined,
					remark: undefined
				}
			},
			rules: {
				memberAccount: [
					{
						required: true,
						message: '请输入充值账号',
						trigger: 'blur'
					},
					{ validator: checkMemberAccount, trigger: 'blur' }
				],
				payType: {
					required: true,
					message: '请选择充值方式',
					trigger: 'change'
				},
				depositorName: {
					required: true,
					message: '请输入付款人姓名',
					trigger: 'blur'
				},
				depositAt: {
					required: true,
					message: '请输入付款时间',
					trigger: 'blur'
				},
				depositAmount: {
					required: true,
					message: '请输入充值金额', //
					trigger: 'blur'
				}
			}
		}
	},
	computed: {
		appId() {
			return this.globalDics.appId || []
		},
		rechargeMethod() {
			return this.globalDics.enumPaymentDepositType || []
			// return [
			// 	{ code: 1, title: '银行卡转账' },
			// 	{ code: 2, title: '银行卡大额充值' },
			// 	{ code: 3, title: '支付宝转银行卡' }
			// ]
		}
	},
	created() {
		this.getkvconfigList()
	},
	methods: {
		onBlur() {
			if (!this.recharge.formData.depositAmount) return
			this.recharge.formData.depositAmount = new Decimal(
				new Decimal(this.recharge.formData.depositAmount).toFixed(
					2,
					Decimal.ROUND_DOWN
				)
			).toNumber()
		},
		refresh() {
			this.loadData()
		},
		onCopy: function(e) {
			this.$message({
				type: 'success',
				message: '复制成功'
			})
		},
		onError: function(e) {
			this.$message({
				type: 'warning',
				message: '复制失败'
			})
		},
		getTransferInfo(name, address, card) {
			// 复制格式勿动
			const info = `
转账姓名：${name}
转账地址：${address}
转账卡号：${card}
`
			return info.trim()
		},
		loadData() {
			this.loading = true
			const params = {
				...this.getParams(this.queryData)
			}
			this.$api
				.getValetRechargeList(params)
				.then((res) => {
					const { record, totalRecord } = res.data || {}
					this.tableDta = Array.isArray(record)
						? Object.freeze(record)
						: []
					this.total = totalRecord || 0
					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 字典查询代客充值方式
		getkvconfigList() {
			const params = {
				k: 'recharge.type.config',
				...this.getParams()
			}
			this.$api
				.getkvconfigQueryList(params)
				.then((res) => {
					// 返回数组字符串或json字符串
					const str = res.data.records[0].v
					const obj = JSON.parse(str)
					// this.rechargeMethods = JSON.parse(json)
					for (const i in obj) {
						this.rechargeMethods.push({ code: i, value: obj[i] })
						this.recharge.formData.payType = this.rechargeMethods[0].code
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		openRechargeFrom(rowData) {
			this.recharge.rowData = Object.assign({}, Object.assign(rowData))
			this.recharge.formData.applyAccount = rowData.applyAccount
			this.recharge.formData.id = rowData.id
			this.recharge.formData.depositAt = new Date()
			this.recharge.dialogVisible = true
		},
		submitRechargeFrom() {
			this.$refs['rechargeForm'].validate((valid) => {
				if (valid) {
					this.recharge.loading = true
					this.recharge.formData.depositAt = dayjs(
						this.recharge.formData.depositAt
					).format('YYYY-MM-DD HH:mm:ss')

					this.$api
						.valetRechargeWriteRechargeAPI(this.recharge.formData)
						.then((res) => {
							this.transferInfoDialog.info = res.data || {}
							this.transferInfoDialog.visible = true
							this.recharge.dialogVisible = false
							this.recharge.loading = false
							this.loadData()
						})
						.catch(() => {
							this.recharge.loading = false
						})
				}
			})
		},
		reset(formName) {
			if (formName === 'searchForm') {
				this.queryData.applyAccount = undefined
				this.pageNum = 1
				this.loadData()
			} else {
				this.recharge.formData = {
					applyAccount: this.recharge.rowData.applyAccount,
					depositAt: this.recharge.rowData.applyAt,
					id: this.recharge.rowData.id,
					payType: this.rechargeMethods[0].code,
					depositAmount: undefined,
					depositorName: undefined,
					memberAccount: undefined,
					remark: undefined
				}
				this.$refs[formName].clearValidate()
			}
		},
		dialogClosed() {
			this.$refs['rechargeForm'].resetFields()
		}
	}
}
</script>

<style lang="scss" scoped>
.params {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.refresh {
		margin-bottom: 15px;
	}
}
::v-deep .recharge-dialog {
	.el-dialog__body {
		padding: 15px 50px 15px 30px;
		.el-input-number {
			.el-input__inner {
				text-align: left;
			}
		}
		.disabled {
			.el-input__inner {
				color: #000;
			}
		}
	}
	.el-dialog__footer {
		padding: 10px 50px 20px;
	}
	::v-deep .el-dialog__title {
		font-weight: 600;
		color: #000000c2;
	}
	::v-deep .el-dialog__header {
		border-bottom: 1px solid #00000015;
	}
}
::v-deep .transfer-info-dialog {
	.el-dialog__header {
		padding: 0;
	}
	.info-wrapper {
		margin: 0 auto;
		width: 65%;
		.logo {
			text-align: center;
		}
		h1 {
			text-align: center;
		}
		.order-number {
			color: rgb(35, 114, 233);
			margin-right: 20px;
		}
		.flex {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			min-height: 25px;
			margin-bottom: 8px;
		}
		.row {
			margin-bottom: 10px;
		}
		.copy-btn {
			cursor: pointer;
		}
		.blod {
			font-weight: 600;
			color: #323030;
		}
	}
}

.tranfer-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	.copy-btn {
		cursor: pointer;
	}
}
.copy-btn {
	cursor: pointer;
}
</style>
